<template>
  <div class="KH_container">
    <Card>
      <ul class="tabbar relative clearfix">
        <li class="item" :class="{'active':state==0}" @click="state=0">未认领({{counts.state0}})</li>
        <li class="item" :class="{'active':state==1}" @click="state=1">已认领({{counts.state1}})</li>
        <li class="item" :class="{'active':state==2}" @click="state=2">已成单({{counts.state2}})</li>
        <li class="item all pullRight" @click="allClue" v-show="state==0">一键认领</li>
        <li class="pullRight marginR20 lineH2" v-show="t_num>0">可申请：{{t_used_num}}/{{t_num}}</li>
      </ul>
      <div>
        <ul class="table-header clearfix">
          <li style="flex:1.5">客户名</li>
          <li style="flex:1.5">专利名</li>
          <li>专利号</li>
          <li style="flex:0.5">费用明细</li>
          <li style="flex:0.5">预估收益</li>
          <li>操作</li>
        </ul>
        <div v-show="list.length>0" class="table" v-for="(clue,index) in list" :key="index">
          <div class="t-info" :class="{'active':single[index]}">
            <span style="flex:1.5" class="applicant">{{clue.customer_name}}</span>
            <span style="flex:1.5">{{clue.patent_name}}</span>
            <span >{{clue.patent_no}}</span>
            <span class="clue-num"  style="flex:0.5">{{clue.clues.length}}条</span>
            <span class="income" style="flex:0.5">￥{{clue.profit}}</span>
            <span class="td-handle">
              <template v-if="state==0">
                 <span   class="  cBlue pointer textLine marginR10" @click="claim(clue.clue_id)">认领</span>
              </template>
              <template v-else-if="state==1">
                <span  class="  cBlue pointer textLine marginR10" @click="completedClue(clue.clue_id)">已成交</span>
                <span  class="  cBlue pointer textLine marginR10" @click="push(clue.clue_id)">详情</span>
                <span  class="  cCCC pointer textLine marginR10" @click="deleteClue(clue.clue_id)">删除</span>
              </template>
              <template v-else-if="state==2">
                <span class=" cBlue  pointer textLine marginR10" @click="push(clue.clue_id)">详情</span>
              </template>
              <span  class="switch margin0" :class="{'active':single[index]}" @click="showItem(index)"></span>
            </span>
          </div>
          <ul v-show="single[index]" class="t-box" v-for="(item,i) in clue.clues" :key="i">
            <li class="padding0-10 textLeft">{{item.clue_type}}</li>
            <li class="padding0-10 textLeft">官费：<em>￥{{item.official_fee}}</em></li>
            <li class="padding0-10 textLeft">收益预估：<em>￥{{item.profit}}</em></li>
            <li class="padding0-10 textLeft">缴费截止日期：{{item.limit_date}}</li>
            
          </ul>
        </div>
      </div>

      <div v-show="list.length == 0 " class="null-show">
        <img src="./img/null-sho.png" alt="">
        <span v-if="state==0">您暂时还没有客户线索</span>
        <span v-else-if="state==1">您暂时还没有认领线索</span>
        <span v-else-if="state==2">您暂时还没有已成单线索</span>
        <a href="javascript:void(0)"  v-if="state==0" class="apply-btn" @click="apply">申请线索</a>
      </div>
      <div class="page"  style="margin-top: 20px">
        <Page :total="total" show-sizer show-total show-elevator size="small"
          :page-size="pageSize"
          :page-size-opts="$app.pageAll.pageSizeOpts"
          :current = 'page'
          @on-change="loadMore"
          @on-page-size-change="changePageSize"
        ></Page>
        
      </div>
    </Card>
  </div>
</template>

<script>
export default {
  name: 'patentRes',
  components: {},
  data () {
    let data={
      single:[], // 是否全选
      state: 0, //0未认领;1已认领;2已成单;3已回收
      page: 1, // 当前页数
      pageSize: $app.pageAll.pageSize, // 默认数据返回条数
      total: 0, // 所有数据条数
      total_page: 0, // 所有页面
      trademark_name:'',// 商标名
      list:[], // 线索数据
      counts:[] // 线索数量
    };

    let tool={
      t_used_num:0,
      t_num:0,
    };
    return Object.assign(data, tool);
  },
  mounted () {
    this.clueList();// 客户线索列表
  },
  methods:{
    // 申请线索
    apply () {
      $ajax.lb_getPatentClue(res => {
        this.clueList();
      })
    },
    // 一键认领
    allClue(){
      let than = this;
      $ajax.lb_getPatentClueReceiveAll(res => {
        $app.toast(res.msg, true);
        than.single = [];
        than.clueList();
      })
    },
    // 客户线索列表
    clueList () {
      let {state,page,pageSize,trademark_name} = this;
      this.clueCount();// 获取线索数量
      this.huoDci();//包年套餐

      // 0未认领;1已认领;2已成单;3已回收
      $ajax.lb_getPatentClueList({state,page,pageSize}, res => {
        this.list = res.data.list;
        this.total = res.data.total;
        this.total_page = res.data.total_page;
      })
    },
    // 获取线索数量
    clueCount () {
      $ajax.lb_getPatentClueCount(null, res => {
        this.counts = res.data;
      })
    },
    //我的资产
    huoDci(){
      $ajax.wZcList(({ role_service_item_list, service_item_list }) => {
        if($app.judgeData(service_item_list.tm_clue)){
          this.t_used_num=service_item_list.tm_clue.used_num;
          this.t_num=service_item_list.tm_clue.num;
        }else{
          this.t_used_num=0;
          this.t_num=0;
        }
      });
    },
    // 认领
    claim (clue_id) {
      let than = this;

      $ajax.lb_getPatentClueReceive(clue_id, res => {
        $app.toast(res.msg, true);
        than.single = [];
        than.clueList();
      })
    },
    // 已成单
    completedClue (clue_id) {
      let than = this;
      $ajax.lb_getPatentClueFinish(clue_id, res => {
        $app.toast(res.msg, true);
        than.single = [];
        than.clueList();
      })
    },
    // 展开
    showItem (index) {
      const single = this.single;
      // 强制更新
      this.$set(this.single,index,!single[index])
    },
    // 删除客户
    deleteClue (clue_id) {
      $ajax.lb_getPatentClueDel(clue_id, res => {
        $app.toast(res.msg, true);
        this.clueList();
      })
    },
    // 加载更多
    loadMore (page) {
      this.page = page;
      this.clueList()
    },
    // 数据返回条
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.clueList()
    },
    // 跳转详情
    push (clue_id) {
      // 页面跳转
      this.$router.push({
        name: 'pClueInfo',
        query: {
          clue_id
        }
      })
    },
  },
  watch:{
    state (newVal) {
      this.single = [];
      this.page = 1;
      this.clueList();
    }
  }
}
</script>

